<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div id="app">
        <!-- 在模板中使用 ref ,ref可以自动解包 不用.value -->
        <div>{{ count }}</div>
        <div>{{ msg }}</div>
        <div>{{ obj.name }} --- {{ obj.age}} --- {{ obj.gender }}</div>
        <div>女朋友：{{ obj.girlFriend.name }}</div>

        <div>
            {{students[0].name}}
        </div>
    </div>


    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
    <script>
        const { createApp, ref } = Vue;
        createApp({
            setup() {
                // ref 函数声明响应式状态
                // ref 支持所有数据类型 但是：一般情况下，基本数据类型用ref,对象类型用reactive ,reactive 性能更好
                // ref 返回一个响应式对象，包装对象,只有一个属性 value
                // ref 是一个深层的响应式对象
                const count = ref(1)
                const msg = ref("hello vue3")
                const obj = ref({
                    name: '张三',
                    age: 18,
                    gender: '男',
                    girlFriend: {
                        name: "小红",
                        gender: "女",
                        age: 17
                    }
                })
                const students = ref([
                    { name: '张三', age: 18, gender: '男' },
                    { name: '李四', age: 19, gender: '男' },
                    { name: '王五', age: 20, gender: '男' }
                ])
                // 在js中使用ref的值，需要.value
                console.log("count=>", count.value);
                console.log("obj.value.name=>", obj.value.name);
                return {
                    count,
                    msg,
                    obj,
                    students
                }

            }
        }).mount("#app")
    </script>
</body>

</html>